<template>
  <div class="detail">
    <div v-show="!showPicDetail">
      <div class="bread-box but20">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item class="btn-green" style=" color: #3DC094;" @click.native="handleBack">定制类样品配置</el-breadcrumb-item>
          <el-breadcrumb-item>详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div>
          <el-button size="mini" @click="handleBack">返回</el-button>
        <!-- <el-button type="primary" size="mini" @click="clickNextStep">确认</el-button> -->
        </div>
      </div>
      <c-list :column="3">
        <c-list-item label="产品配置单" :value="formData.configCode" />
        <c-list-item label="对应产品配置任务" :value="formData.configTaskCode" />
        <c-list-item label="任务来源" dict-type-code="PRODUCT_CONFIG_TASK_SOURCE" :value="formData.source" />
        <c-list-item label="产品配置类型" dict-type-code="PRO_CONFIG_TYPE" :value="formData.proConfigType" />
        <c-list-item label="产品配置进度" dict-type-code="PRO_CONFIG_SCHEDULE" :value="formData.schedule" />
        <!-- <c-list-item label="是否含自主配置" dict-type-code="BOOLEANS" :value="formData.haveSelfSampleLoad" /> -->
        <!-- <c-list-item label="自主配置申请单号" value="XXXXXXXXX" /> -->
        <c-list-item label="门店建设项目号" :value="formData.constCode" />
        <c-list-item label="所属门店编码" :value="formData.shopCode" />
        <c-list-item label="所属门店名称" :value="formData.shopName" />
        <c-list-item label="所属客户编码" :value="formData.clientCode" />
        <c-list-item label="所属客户名称" :value="formData.clientName" />
        <c-list-item label="所属办事处" :value="formData.officeName" />
        <c-list-item label="产品配置人员" :value="formData.proConfiguratorName" />
        <c-list-item label="关联图纸总面积" :value="formData.picTotalArea" />
        <c-list-item label="采购订单号" :value="formData.poCode" />
        <c-list-item label="采购订单状态" dict-type-code="PO_STATE" :value="formData.poState" />
        <c-list-item label="采购订单提报时间" :value="formData.orderCreateTime" />
        <c-list-item label="创建时间" :value="formData.createTime" />
        <c-list-item label="创建人" :value="formData.createBy" />
        <c-list-item label="修改人" :value="formData.lastUpdateBy" />
        <c-list-item label="修改时间" :value="formData.lastUpdateTime" />
      </c-list>
      <c-section title="关联图纸信息">
        <c-table-box hide-func :data="formData.designPictureDtos" :table-config="picTableConfig" />
      </c-section>
      <c-section title="产品配置图纸">
        <div style="margin-bottom: 10px">
          <c-table-box :data="tableFileData" :table-max-height="400" hide-func :table-config="tableConfig" v-bind="$attrs" />
          <el-image-viewer
            v-if="showViewer"
            :on-close="closeViewer"
            :url-list="urlList"
          />
        </div>
      </c-section>
      <c-section title="产品配置清单" style="margin-bottom: 20px">
        <c-permission-tabs v-model="activatedType">
          <!-- <el-tab-pane label="全屋定制" name="CUSTOMIZED">
          <detail-table ref="tabTable" :detail-id="detailId" :active-type="activatedType" type="CUSTOMIZED" />
        </el-tab-pane> -->
          <el-tab-pane label="整体橱柜" name="CUPBOARD">
            <detail-table ref="tabTable" :detail-id="detailId" :active-type="activatedType" type="CUPBOARD" />
          </el-tab-pane>
          <el-tab-pane label="定制卫浴" name="BATHROOM">
            <detail-table ref="tabTable" :detail-id="detailId" :active-type="activatedType" type="BATHROOM" />
          </el-tab-pane>
        </c-permission-tabs>
      </c-section>
    </div>
    <detail v-if="showPicDetail" :shop-config-data="rowId" page-flag="shopConfig" :page-show.sync="showPicDetail" @goBack="backDetail" />
  </div>
</template>
<script>
import { getProConfigEditData } from '@/api/proConfig'
import { getShopAttachment } from '@/api/decorate'
import { getDictByPatchType } from '@/api/dataDict'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import DetailTable from './components/detailTable.vue'
import detail from '../../shopDrawing/management/detail.vue'
import { getAreaData } from '../task/components/index'
export default {
  name: 'PCFinishedDetail',
  components: { ElImageViewer, DetailTable, detail },
  props: {
    isAudit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rowId: '',
      showPicDetail: false,
      detailId: '',
      activatedType: '',
      showViewer: false,
      areaList: [],
      urlList: [],
      tableFileData: [],
      formData: {},
      designRangeList: [],
      decorationTypeList: [],
      designSpaceList: [],
      designBizTypeList: [],
      serachFilters: [],
      // CRMList: [],
      picTableConfig: {
        setting: [
          {
            prop: 'picTaskCode',
            label: '图纸编码',
            minWidth: 100,
            className: 'btn-green',
            isButton: true,
            clickFun: this.toPicDetail
          },
          {
            prop: 'picType',
            label: '图纸类型',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_TYPE'
            },
            minWidth: 100
          },
          {
            prop: 'designRange',
            label: '设计范围',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designRange) {
                return
              }
              let list = []
              if (typeof (row.designRange) === 'string') {
                list = row.designRange.split(',')
              } else {
                list = row.designRange
              }
              const arr = []
              this.designRangeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'decorationType',
            label: '装修形式',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.decorationType) {
                return
              }
              let list = []
              if (typeof (row.decorationType) === 'string') {
                list = row.decorationType.split(',')
              } else {
                list = row.decorationType
              }
              const arr = []
              this.decorationTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designSpace',
            label: '设计区域',
            minWidth: 100,
            render: (creat, row) => {
              if (!row.designSpace) {
                return
              }
              let list = []
              if (typeof (row.designSpace) === 'string') {
                list = row.designSpace.split(',')
              } else {
                list = row.designSpace
              }
              const arr = []
              this.areaList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'designBizType',
            label: '设计业务类型',
            minWidth: 140,
            render: (creat, row) => {
              if (!row.designBizType) {
                return
              }
              let list = []
              if (typeof (row.designBizType) === 'string') {
                list = row.designBizType.split(',')
              } else {
                list = row.designBizType
              }
              const arr = []
              this.designBizTypeList.forEach((item) => {
                const flag = list.some(v => v === item.dictCode)
                if (flag) {
                  arr.push(item.dictName)
                }
              })
              return (<span>{ arr.toString() }</span>)
            }
          },
          {
            prop: 'picTotalArea',
            label: '设计总面积',
            minWidth: 120
          },
          // {
          //   prop: 'finishedProductAreaSummary',
          //   label: '成品业务面积汇总',
          //   minWidth: 100
          // },
          {
            prop: 'softwareSumArea',
            label: '软体区面积',
            minWidth: 120
          },
          {
            prop: 'suiteSumArea',
            label: '套房区面积',
            minWidth: 120
          },
          {
            prop: 'haveEAndC',
            label: '是否含成融定',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'BOOLEANS'
            },
            minWidth: 140
          },
          {
            prop: 'eandCArea',
            label: '成融定面积',
            minWidth: 120
          },
          {
            prop: 'newBusinessAreaSummary',
            label: '新业务面积汇总',
            minWidth: 100
          },
          {
            prop: 'expectEndTime',
            label: '预计设计完成时间',
            minWidth: 140
          },
          {
            prop: 'designUnitName',
            label: '设计单位',
            minWidth: 100
          },
          {
            prop: 'designerName',
            label: '设计师',
            minWidth: 100
          },
          {
            prop: 'schedule',
            label: '图纸进度',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_SCHEDULE'
            },
            minWidth: 100
          },
          {
            prop: 'state',
            label: '图纸状态',
            propEnum: {
              domainCode: 'marketing',
              appCode: 'slm',
              dictTypeCode: 'PIC_DESIGN_STATE'
            },
            minWidth: 100
          }
        ]
      },
      otherFilters: [],
      productTableConfig: {
        interfacePath: `${process.env.VUE_APP_BASE_API}/api/v1/productConfigDetail/page`,
        setting: [
          {
            prop: 'productCode',
            label: '采购单号'
          },
          {
            prop: 'productDesc',
            label: '订单状态'
          },
          {
            prop: 'modelName',
            label: '产品柜号'
          },
          {
            prop: 'seriesName',
            label: '产品类型'
          },
          {
            prop: 'categoryName',
            label: '产品名称'
          },
          {
            prop: 'productNumber',
            label: '产品主色'
          },
          {
            prop: 'productState',
            label: '柜体数量'
          },
          {
            prop: 'purchaseControlState',
            label: '采购类型'
          }
        ]
      },
      tableConfig: {
        setting: [
          {
            prop: 'attachmentName',
            label: '附件名称'
          },
          {
            prop: 'attachmentType',
            label: '附件类型'
          },
          {
            prop: 'createBy',
            label: '上传人'
          },
          {
            prop: 'createTime',
            label: '上传时间'
          },
          {
            label: '操作',
            type: 'hidden',
            width: '200',
            button: [
              {
                name: '查看预览',
                clickFun: this.handlePreview,
                className: 'table-handelclick-text',
                type: 'text'
              },
              {
                name: '附件下载',
                clickFun: this.downLoadFile,
                className: 'table-handelclick-text',
                type: 'text'
              }
            ]
          }
        ]
      }
    }
  },
  async created() {
    await this.getDictByTypeCode(['DECORATION_RANGE', 'DECORATION_FORM', 'BELONG_REGION', 'BIZ_TYPE']).then(res => {
      this.designRangeList = res.DECORATION_RANGE // 设计范围
      this.decorationTypeList = res.DECORATION_FORM // 装修形式
      this.designSpaceList = res.BELONG_REGION // 设计区域
      this.designBizTypeList = res.BIZ_TYPE // 设计业务类型
    })
    this.areaList = await getAreaData()
    this.detailId = this.$route.params.id
    getProConfigEditData(this.$route.params.id).then(res => {
      if (res.success && res.data) {
        this.formData = res.data
        this.getPicTotalArea()
        // const filtersRaw = [{ 'id': 'configSheetId', 'property': 'configSheetId', 'operator': '=', 'value': this.formData.id }]
        // this.serachFilters = [...filtersRaw]
        // configSheetId
      }
    })
    this.getFiles(this.$route.params.id)
  },
  methods: {
    // 获取数据字典
    async getDictByTypeCode(data) {
      const obj = await getDictByPatchType(data)
        .then(res => {
          return res
        })
      return obj
    },
    // 获取附件
    getFiles(id) {
      getShopAttachment(id).then(res => {
        this.tableFileData = res.data
      })
    },
    // 关闭查看器
    closeViewer() {
      this.showViewer = false
      this.urlList = []
    },
    handlePreview(file) {
      this.urlList = []
      const typeName = file.typeName || file.attachmentUrl.split('.')[1].toLowerCase()
      if (typeName === 'jpg' || typeName === 'jpeg' || typeName === 'png') {
      // 图片预览
        this.showViewer = true
        const picUrl = process.env.VUE_APP_IMG_PREFIX + '/' + file.attachmentUrl
        this.urlList.push(picUrl)
      } else if (typeName === 'pdf' || typeName === 'doc' || typeName === 'docx' || typeName === 'xlsx' || typeName === 'xls') {
        window.open(`${process.env.VUE_APP_OFFICE_PREFIX}?src=` + process.env.VUE_APP_IMG_PREFIX + file.attachmentUrl)
      } else {
        this.$message.warning('该文件类型不支持预览')
      }
    },
    getFileData(file) {
      const t = {
        ...file,
        attachmentName: file.attachmentName || '',
        attachmentUrl: file.attachmentUrl || '',
        createBy: file.createBy || '',
        createTime: file.createTime || '',
        id: file.id || file.uid,
        typeName: file.typeName || (file.attachmentUrl || '').split('.').pop(),
        belongModel: file.belongModel || '',
        attachmentType: file.attachmentType || '',
        configAttachmentId: file.configAttachmentId || ''
      }
      delete t.raw
      return t
    },
    downLoadFile(row) {
      const v = this.getFileData(row)
      this.$downFile(v)
    },
    handleBack() {
      this.formData = {}
      this.$store.dispatch('views/goBack')
    },
    // 查看图纸详情
    toPicDetail(row) {
      this.rowId = row
      this.showPicDetail = true
    },
    // 计算关联图纸面积
    getPicTotalArea() {
      let area = 0
      this.formData.designPictureDtos.forEach(item => {
        area = area + (isNaN(Number(item.picTotalArea)) ? 0 : Number(item.picTotalArea))
      })
      this.formData.picTotalArea = area
    },
    // 返回配置详情
    backDetail() {
      this.showPicDetail = false
    }
  }
}
</script>
<style lang="scss" scoped>
.but20{ margin-bottom: 20px;}
.el-breadcrumb__inner .btn-green{
    color: #3DC094;
}
/deep/.el-breadcrumb__inner{
  color: $qup-color-primary;
}
</style>
